<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表展现</title>
		<!-- 1.导入JS函数类库 -->
		<script src="jquery-3.6.0.min.js"></script>
		<!-- 编辑JS发起Ajax请求 -->
		<script>
			// 让页面加载完成之后再执行
			//函数式编程
			$(function(){
				alert("页面加载完成,jquery调用成功")
			// 利用ajax的get请求方式 http:.//localhost:8090/getUser
			//将数据以表格的形式列表展现
			//1.$.get()、2.$.post()、3.$.getJSON()、4$.ajax()
			// js中可以根据返回值的数据动态匹配类型
			// $.get("url地址，"参数"，function(data){},返回值类型")
			var url="http://localhost:8090/getUser";
			// 参数的写法1：key=value&key2=value2
			var name ="张三";
			var age=18;
			var args1="name=" +name+"&age="+age;
			// 参数的写法2：{key:value,key2:value2}
			var arg2 = {name:name,age:age}
			//如果有参数，直接添加，如果没有参数，直接省略
			$.get(url,function(data){
				console.log(data)
				//js 实现for循环
				//1、for(var i = 0;i<data.length;i++)
				// for(var i = 0 ;i<data.length;i++){
				// 	var user = data[i];
				// 	console.log(user)
				// }
				//2.增强for写法 index 表示下标
			// 	for(var index in data){
			// 		console.log(data[index])
			// }
				for(var user of data){
					var id = user.id
					var name = user.name
					var age = user.age
					var sex = user.sex
					console.log(name)
					var tr = "<tr align = 'center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
				//利用id选择器，定位table标签 append向每个匹配的元素内部追加内容
				$("#tab1").append(tr)
				}
			})

			/**$.ajax相关说明
			 *1.{key:value}
			 * 2.type:ajax请求的方式：get/post/put/delete
			 * 3.简化$.get(),$.post(),$.getJSON ()
			 * 4.url:远程服务器地址
			 * 5.JSONP:js端解决跨域问题的一种方式
			 * 6.回调地狱:由于ajax多层级嵌套，导致返回值的回调函数解析困难，
			 * 把这种调用叫回调地狱
			 * 解决方案：1闭包解决，闭包非闭
			 * 			2通过promise对象进行封装，vue对象中解释
			 */
		
			/*	$.ajax({
				  type:"get"
				  url:"http://localhost:8090/getUser",
				  data:{key:value,key2:value}
				  dataType:"返回的数据类型"(json,xml,html,jsonp,text等)
				  async:false,//异步改为同步,默认为异步
				  cache:false
				  success: function(result){
					  console.log(result)
				  }
				  error:fuction(){
					  alert("服务器正忙，请稍后")
				  }
			 })
		*/			
		})
		</script>
	</head>
	<body>
		<table id= "tab1" border="1px" width="700px" align="center">
			<tr ><td colspan = "4" align="center">
			<h1 >表格数据</h1></td>
			</tr>
			<tr align="center">
				<td>ID编号</td>
				<td>名称</td>
				<td>年龄</td>
				<td>性别</td>
			</tr>
			
		</table>
	</body>
</html>
